<template>
  <v-dialog v-model="dialogShow" transition="dialog-bottom-transition" persistent>
    <v-card>
      <v-card-text class="pa-2">
        <div class="text-subtitle-2">Hello world!</div>
      </v-card-text>
      <v-card-actions class="justify-end">
        <v-btn text @click="dialogShow = false">Close</v-btn>
        <v-btn text @click="dialogShow = false">Save</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
      promiseStatus: null,
      show: false
    }
  },
  methods: {
    confirm() {
      const _this = this
      this.show = true
      return new Promise(function(resolve, reject) {
        _this.promiseStatus = { resolve, reject }
      })
    },
    ok() {
      this.show = false
      this.promiseStatus && this.promiseStatus.resolve()
    },
    cancel() {
      this.show = false
      this.promiseStatus && this.promiseStatus.reject()
    }
  }
}
</script>
<style>
.dialogwrapper {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 6;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) 0s, z-index 1ms ease 0s;
  outline: none;
}

.dialog {
  overflow-y: auto;
  pointer-events: auto;
  width: 100%;
  z-index: inherit;
  box-shadow:
    rgba(0, 0, 0, 0.2) 0 11px 15px -7px,
    rgba(0, 0, 0, 0.14) 0 24px 38px 3px,
    rgba(0, 0, 0, 0.12) 0 9px 46px 8px;
  border-radius: 4px;
  margin: 24px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
  max-width: 290px;
}

.overlay {
  align-items: center;
  border-radius: inherit;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
  background: #000;
  opacity: 0.46;
}
</style>
